<template>
  <a-card class="mb-4">
    <a-steps @change="onChange" :current="currentStep" :items="stepItems"></a-steps>
  </a-card>
</template>

<script setup lang="ts">
import { stepItems, currentStep } from './data';
import { formRef } from '../../data/form';

const onChange = async (i: number) => {
  const validate = await formRef.value?.validate();
  if (validate) {
    currentStep.value = i;
  }
};
</script>

<style lang="scss" scoped></style>
